const _Vue = Vue
const _createVNode = Vue.createVNode
const _Comment = Vue.Comment

const _hoisted_1 = { background: 'red' }
const _hoisted_2 = { "'padding-left": "10px'" }
const _hoisted_3 = { class: 'todoapp' }

return function render() {
  with (this) {
    const {
      createVNode: _createVNode,
      Comment: _Comment,
      renderList: _renderList,
      openBlock: _openBlock,
      createBlock: _createBlock,
      Fragment: _Fragment,
      toString: _toString
    } = _Vue

    return (
      _openBlock(),
      _createBlock('section', _hoisted_3, [
        _createVNode(
          _Comment,
          null,
          ' <header class="header">\n          <h1>todos</h1>\n          <input class="new-todo"\n                 autofocus autocomplete="off"\n                 placeholder="What needs to be done?"\n                 v-model="state.newTodo"\n                 @keyup="onNewTodoKeyup">\n        </header> '
        ),
        _createVNode(
          _Comment,
          null,
          ' <section class="main" v-if="state.todos.length">\n          <input id="toggle-all" class="toggle-all" type="checkbox" v-model="state.allDone">\n          <label for="toggle-all">Mark all as complete</label>\n          <ul class="todo-list">\n            <li v-for="todo in state.filteredTodos"\n                class="todo"\n                :key="todo.id"\n                :class="{ completed: todo.completed, editing: todo == state.editedTodo }">\n              <div class="view">\n                <input class="toggle" type="checkbox" v-model="todo.completed">\n                <label @dblclick="editTodo(todo)">{{ todo.title }}</label>\n                <button class="destroy" @click="removeTodo(todo)"></button>\n              </div>\n              <input class="edit" type="text"\n                     v-model="todo.title"\n                     @blur="doneEdit(todo)"\n                     @keyup="onEditKeyup($event,todo)"\n              >\n            </li>\n          </ul>\n        </section> '
        ),
        _createVNode('div', null, [
          _createVNode(
            'ul',
            { style: _hoisted_1 },
            [
              (_openBlock(false),
              _createBlock(
                _Fragment,
                null,
                _renderList(5, item => {
                  return (
                    _openBlock(),
                    _createBlock(
                      'li',
                      {
                        style: _hoisted_2,
                        key: item
                      },
                      _toString(item),
                      5 /* TEXT, STYLE */
                    )
                  )
                }),
                64 /* KEYED_FRAGMENT */
              ))
            ],
            4 /* STYLE */
          )
        ]),
        _createVNode(
          _Comment,
          null,
          ' <footer class="footer" v-if="state.todos.length">\n            <span class="todo-count">\n              <strong>{{ state.remaining }}</strong>\n              <span>{{state.remainingText}}</span>\n            </span>\n          <ul class="filters">\n            <li><a href="#/all" :class="{ selected: state.visibility == \'all\' }">All</a></li>\n            <li><a href="#/active" :class="{ selected: state.visibility == \'active\' }">Active</a></li>\n            <li><a href="#/completed" :class="{ selected: state.visibility == \'completed\' }">Completed</a></li>\n          </ul>\n          <button class="clear-completed" @click="removeCompleted" v-if="state.todos.length > remaining">\n            Clear completed\n          </button>\n        </footer> '
        )
      ])
    )
  }
}
